<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 上传图片 </title>
		<style type="text/css">
			
			body
			{
				margin: 0;
			}
			form
			{
				padding: 10px;
			}
			img
			{
				width: 100px;
				height: 100px;
			}
			#chooseimg input
			{
				display: none;
			}
			
		</style>
	</head>
	<body>
		
		<form action="javascript:;">
			<div id="chooseimg">
				<img src="add.png"/>
				<input type="file"/>
				<img src="add.png"/>
				<input type="file"/>
				<img src="add.png"/>
				<input type="file"/>
			</div>
			<div id="upload">
				<button type="button"> 添加 </button>
				<button type="button"> 上传 </button>
			</div>
		</form>
		
		<script type="text/javascript">
			
			var imgs = document.querySelectorAll('#chooseimg img');
			
			for( var i = 0;i < imgs.length;i++ ){
				imgs[i].onclick = function(){
					// 通过点击图片实现点击   input 选择文件的效果
					this.nextElementSibling.click();
				}
			}
			
			
			var inputs = document.querySelectorAll('#chooseimg input');
			var file;
			
			for( var i = 0;i < inputs.length;i++ ){
				// 表单内容发生变化
				inputs[i].onchange = function(){
//					console.dir(this);
//					console.log(this.files);
					// 取出选择的文件( 图片、文件、html... )
					file = this.files[0];
					
					// startsWith('image') 判断字符串是否以 'image' 开头
					if(file.type.startsWith('image')){
						// URL.createObjectURL(file) 创建一个指向该文件的 url
						this.previousElementSibling.src = URL.createObjectURL(file);
					}else{
						alert('亲，您上传的文件格式不正确，请选择图片');
					}
				}
			}
			
		</script>
		
	</body>
</html>
